<template>
  <div class="datasource" ref="datasource">
    <el-tabs>
      <el-tab-pane v-for="(it,index) in data" :label="it.Name" :name="`${index}`" :key="it.Identity">
        <el-descriptions :labelStyle="{width:'20%'}" :contentStyle="{width: '30%'}" :column="2" border>
          <el-descriptions-item v-for="(val, key) in it" :key="key">
            <template slot="label">
              <div class="datasource-key" :title="langData(`${key}Desc`)===`${key}Desc`?'':langData(`${key}Desc`)">
                {{ langData(String(key)) }}
              </div>
            </template>
            <div class="datasource-value">{{ val }}</div>
          </el-descriptions-item>
          <el-descriptions-item :key="'ConnectionInfo'">
            <template slot="label">
              <div class="datasource-key" title="连接池信息">
                连接池信息
              </div>
            </template>
            <div class="datasource-value">
              <el-button type="text" @click="connectionInfo(it.Identity)">查看</el-button>
            </div>
          </el-descriptions-item>
          <el-descriptions-item :key="'sql列表'">
            <template slot="label">
              <div class="datasource-key" title="sql列表">
                sql列表
              </div>
            </template>
            <div class="datasource-value">
              <el-button type="text" @click="sql(it.Identity)">查看</el-button>
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts">
import {Component, Vue} from "vue-property-decorator";
import {datasource} from "@/api/druidMonitor";
import lang from "@/utils/datasourceLanguage";

@Component({
  name: "DataSource"
})
export default class Dept extends Vue {
  data: Array<any> = [];

  /*获取数据*/
  getData() {
    datasource().then(response => {
      this.data = response.data;
    }).catch((e) => {
      console.error(e);
    });
  }

  langData(key: string) {
    return lang[key] ? lang[key][1] : key;
  }

  connectionInfo(id) {
    this.$router.push(`/monitor/connection-info?id=${id}`)
  }

  sql(id) {
    this.$router.push(`/monitor/sql?id=${id}`)
  }

  mounted() {
    this.getData();
  }
}
</script>

<style lang="scss" scoped>
.datasource {
  width: 100%;
  height: 100%;

  ::v-deep .el-descriptions__table {
    table-layout: fixed;
  }

  &-key, &-value {
    overflow: hidden; //超出宽度部分隐藏
    text-overflow: ellipsis; //超出部分显示省略号
  }

  &-key {
    cursor: pointer;
  }
}
</style>
